<template>
  <v-layout class="w-100 position-absolute" full-height>
    <div
      class="position-absolute right-0 top-0 overflow-hidden text-no-wrap bg-s bg-sidebar"
      data-testid="layout-ready"
      :style="leftStyle"
    >
      <TabBar />
    </div>
    <LeftSidebar v-if="isMainWindow" :width="LEFT_WIDTH" />
    <v-layout class="main-container position-absolute d-flex" :style="mainStyle">
      <CenterLandingPanel v-if="!activeTab" :is-logged-in="isLoggedIn" :margin="margin" />
      <v-sheet
        v-else
        class="flex-1-1-0 position-relative overflow-hidden"
        color="transparent"
        elevation="2"
        rounded="lg"
        :style="margin"
      >
        <AddressBar />
        <!--        -->
        <PageLoadingOverlay
          class="rounded-lg"
          :model-value="activeTab?.nav.isLoading ?? false"
          :style="{ top: TOP_HEIGHT - SEARCH_BAR_HEIGHT - bw / 2 + 'px' }"
          :url="activeTab?.url"
        />
        <BookmarkDrawer />
      </v-sheet>
      <!--   right sidebar视图分隔线   -->
      <SidebarLayout class="flex-none" />

      <!-- 分组详情对话框：不影响登录/起始页展示 -->

      <GroupDrawer />
    </v-layout>
    <RightSidebar />
    <!-- 统一的添加页面对话框 -->
    <AddSidebarDialog
      v-model:visible="layoutStore.showAddPageDialog"
      :default-sidebar="layoutStore.addPageDialogConfig"
    />
  </v-layout>
</template>

<script lang="ts" setup>
import { computed, onBeforeUnmount, shallowRef } from 'vue'

import { WINDOW_STYLE_CONSTANTS } from '~shared/constants/layout'
import { useSystemStateListener } from '@/composables/useSystemStateListener'
import SidebarLayout from '@/windows/layoutBrowser/components/sidebar/SidebarLayout.vue'
import { useLayoutStore } from '@/windows/layoutBrowser/stores/layout'
import AddSidebarDialog from './components/sidebar/AddSidebarDialog.vue'
import AddressBar from './components/topBar/AddressBar.vue'
import LeftSidebar from './components/sidebar/LeftSidebar.vue'
import RightSidebar from './components/sidebar/RightSidebar.vue'
import TabBar from './components/topBar/TabBar.vue'
import CenterLandingPanel from './components/CenterLandingPanel.vue'

import { useTabStore } from '@/windows/layoutBrowser/stores/tab'
import BookmarkDrawer from './components/BookmarkDrawer.vue'
import GroupDrawer from './components/drawer/GroupDrawer.vue'
import { authState } from '@/windows/layoutBrowser/stores/auth'

import { shortcutEvents } from '@/utils/shortcut-events'
import { getSystemTab } from '~shared/utils/tab'
import { TAB_IDS } from '~shared/constants'

const { LEFT_WIDTH, TOP_HEIGHT, RIGHT_WIDTH, SEARCH_BAR_HEIGHT, VIEW_BORDER_WIDTH } =
  WINDOW_STYLE_CONSTANTS
const bw = VIEW_BORDER_WIDTH
const margin = { margin: `0 0 ${bw}px ${bw}px` }
const layoutStore = useLayoutStore()

// 登录态监听：保持 isLoggedIn 响应式
// - 订阅 authState 变化并在卸载时取消订阅
const auth = shallowRef(authState.state)
const offAuth = authState.watch(
  newVal => {
    auth.value = newVal
  },
  { immediate: true }
)

const isLoggedIn = computed(() => !!auth.value?.isLoggedIn)

onBeforeUnmount(() => offAuth && offAuth())

const tabStore = useTabStore()

const activeTab = computed(() => {
  return tabStore.activeTab?.tab
})

const isMainWindow = _pre_.browser.isMainWindow()

const top = computed(() => {
  return TOP_HEIGHT - SEARCH_BAR_HEIGHT + bw / 2
})
const left = computed(() => {
  return isMainWindow ? LEFT_WIDTH : 0
})

// 启动系统状态监听器
useSystemStateListener()

// 获取左侧边栏宽度常量
const mainStyle = computed(() => {
  return {
    top: top.value + 'px',
    left: left.value + 'px'
  }
})
const leftStyle = computed(() => {
  return { left: (isMainWindow ? LEFT_WIDTH : '0') + 'px' }
})

shortcutEvents.openSettings(() => {
  tabStore.openTab(getSystemTab(TAB_IDS.SETTINGS, { autoFocus: true }))
})

const rightWidth = RIGHT_WIDTH + 'px'
</script>
<style scoped>
.main-container {
  bottom: 0;
  margin: -1px;
  right: v-bind(rightWidth);
}
</style>
